<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>讲师介绍</title>
    <link rel="shortcut icon" href="./images/logo.png">
    <style>
        html,
        body {
            width: 100%;
            background-color: #e8edefad;
        }

        h2 {
            text-align: center;
        }

        ul,
        ol {
            list-style: none;
            display: flex;
        }

        a {
            text-decoration: none;
        }

        /* 标题 */
        .title {
            display: flex;
            width: 100%;
            height: 50px;
            background-color: rgb(200, 225, 225);
            margin: 0px;
        }

        .title>ul {
            margin-left: 1050px;

        }

        .title>ul>li {
            margin-left: 50px;
        }

        .title>img {
            width: 45px;
            height: 52px;
            margin-left: 30px;
        }

        .title>input {
            border-radius: 25px/50px;
            height: 20px;
            margin-left: 200px;
            position: absolute;
            right: 45%;
            top: 20px;
            width: 15%;
        }

        #sou {
            margin-right: 3px;
            top: 23px;
            width: 18px;
            height: 18px;
            position: absolute;
            right: 45%;
            cursor: pointer;
        }

        /* 导航栏 */
        .nav {
            width: 100%;
            height: 60px;
            background-color: rgb(111, 187, 219);
            overflow: hidden;
        }

        .nav>ul {

            height: 60px;
            /* margin-left: 100px; */
            padding-left: 0px;
            margin-top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav>ul>li {
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            /* width: 100px; */
            margin-left: 70px;
            text-align: center;
        }

        .nav>ul>li>a {
            font-size: 22px;
            color: black;
            font-family: "华文新魏";
        }

        .nav>ul>li:hover {
            background-color: rgba(198, 224, 215, 0.573);
            height: 60px;
        }

        .qr {
            display: flex;
            margin-right: 10px;
        }

        .qr:hover .qr2 {
            display: block;
        }

        .qr2 {
            margin-top: 30px;
            top: 100%;
            right: 40%;
            position: absolute;
            width: 120px;
            height: 120px;
            margin-left: 10px;
            display: none;
            border: 10px white solid;
        }

        .title>ul>li>a,
        .deng>li>a {
            color: black;
            font-size: 18px;
            font-family: "华文新魏";
        }

        .item {
            top: 115px;
            position: absolute;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 20px aquamarine solid;
            display: none;
        }

        .item1 {
            left: 290px;
        }

        .item2 {
            left: 410px;
        }

        .item3 {
            left: 530px;
        }

        /* 登录和注册盒子 */
        .deng {
            display: flex;
            position: absolute;
            right: 0;
        }

        /* 响应式部分导航栏 */
        @media screen and (max-width:768px) {

            /* 对标题响应式 */
            .title>ul {
                margin-left: 150px;
                /* position: absolute;
                left: 50%; */
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .title>ul>li {
                margin-left: 10px;
            }

            .title>input {
                border-radius: 25px/50px;
                height: 20px;
                margin-left: 200px;
                position: absolute;
                right: 0px;
                top: 20px;
            }

            #sou {
                border-radius: 25px/50px;
                height: 20px;
                margin-left: 200px;
                position: absolute;
                right: 0px;
                top: 22px;
            }

            #searchButton {
                margin-right: 3px;
                top: 18px;
                width: 18px;
                height: 18px;
                position: absolute;
                right: 0px;
                cursor: pointer;
            }

            /* 对导航栏响应式 */
            .nav>ul {
                height: 60px;
                margin-left: 0px;
                padding-left: 0px;
                margin-top: 0px;
            }

            .nav>ul>li {
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100px;
                margin-left: 0px;
                font-size: 12px;
            }

            /* 登录和注册盒子 */
            .deng {
                display: flex;
                position: absolute;
                right: 0px;
                top: 78px;
                font-size: 12px;
            }

            .qr2 {
                margin-top: 30px;
                top: 0px;
                right: 40%;
                position: absolute;
                width: 70px;
                height: 70px;
                margin-left: 10px;
                display: none;
                border: 10px white solid;
            }
        }

        @media screen and (max-width:1137px) {
            .nav>ul>li>a {
                font-size: 15px;
            }

            .nav>ul>li {
                margin-left: 30px;
            }
        }

        @media screen and (max-width:941px) {
            .nav>ul>li {
                margin-left: 5px;
            }

            .nav>ul {
                margin-left: -22%;
            }
        }

        @media screen and (max-width:698px) {
            .nav>ul>li {
                margin-left: -20px;
            }

            .nav>ul {
                margin-left: -30%;
            }

            .deng>li>a {
                font-size: 15px;
            }

            .deng {

                top: 80px;

            }
        }
    </style>
</head>

<body>
    <div>
        <!-- 顶部【logo名字（左）、搜索栏（中）、小组信息（右） -->

        <div>
            <!-- logo名字 -->
            <!-- 搜索栏(含js) -->
            <!-- 小组信息 -->
            <div class="title">
                <img src="./images/logo2.png" alt="">
                <ul>
                    <li><a href="">小组</a></li>
                    <li><a href="https://www.bilibili.com/video/BV1SJhVexEeg/?vd_source=6f4b3c43be3dc4f105a985362d1dce81">视频</a></li>
                    <li><a href="">仓库</a></li>
                </ul>
                <input type="text">
                <img id="sou" src="./images/搜索图标.png" alt="">
            </div>
        </div>

        <!-- 导航栏 -->
        <div>
            <!-- 主菜单 -->
            <div class="nav">
                <ul>
                    <!-- 导航栏中 -->
                    <!-- 导航栏的颜色尽量和logo颜色搭配 -->
                    <!-- 鼠标悬停在"首页、HTML、CSS、JavaScript、Photoshop、Photography"时有子菜单 -->
                    <li><a href="../index首页.html">首页</a></li>

                    <li><a href="../li/hcj.html">Web前端</a></li>
                    <li><a href="../瑜-ps/a-ps.html">Photoshop</a></li>
                    <li><a href="./摄影.html">Photography</a></li>
                    <div class="deng">
                        <!-- 导航栏右 -->
                        <li class="qr">
                            <!-- 鼠标悬停时下方出现二维码 -->
                            <a href="">
                                <span>客户端下载</span>
                            </a>
                            <!-- 二维码 -->
                            <div>
                                <img class="qr2" src="./images/csdn二维码.png" alt="">
                            </div>
                        </li>
                        <!-- (含js) -->
                        <li><a href="./登录.html" target="_blank">登录 ||</a></li>
                        <li><a href="./注册.html" target="_blank">&nbsp;注册</a></li>
                    </div>
                </ul>
            </div>

            <!-- 讲师介绍 -->
            <style>
                .teachers {
                    background-color: rgba(200, 225, 225, 0.773);
                    width: 100%;
                    height: 20%;
                    margin: left 10%;
                    display: flex;

                }

                .teachers>div>img {
                    border-radius: 50%;
                    width: 300px;
                    height: 300px;
                    margin: 10px;
                }
            </style>
            <div style="width: 90%;margin-left: 5%;">
                <div class="teachers" style="margin-top: 30px;">
                    <div>
                        <img src="./images/黑马程序员.png" alt="">
                    </div>
                    <div>
                        <div style="margin-top: 5%;font-size: 20px;">
                            <b>黑马程序员</b>
                        </div>
                        <div style="font-size: 18px;margin-top: 30px;width: 90%;line-height: 30px;font-family: '华文楷体';">
                            黑马程序员以“务实”、“创新”、“责任”、“育人”为核心价值观，致力于服务各大软件企业。黑马程序员不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术研发最新的技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。黑马程序员现已开设JavaEE、HTML&JS+前端、Python+大数据开发、人工智能开发、UI/UE设计、软件测试、新媒体+短视频直播运营、产品经理、Linux云计算+运维开发、智能机器人软件开发、电商视觉运营设计等培训学科。
                        </div>
                    </div>
                </div>

                <div class="teachers" style="margin-top: 10px;">
                    <div>
                        <div style="margin-top: 7%;font-size: 20px;margin-left: 3.5%;">
                            <b>北大陈斌老师</b>
                        </div>
                        <div style="font-size: 18px;margin-top: 30px;width: 90%;line-height: 30px;font-family: '华文楷体';margin-left: 3.5%;">
                            陈斌老师是北京大学地球与空间科学学院教师，博士，教学教授，硕士生导师。获得北京大学计算机科学技术系学士、硕士和博士学位。主讲本科生课程《数据结构与算法（Python版）》、《离散数学》、北京大学通识教育核心课程《地球与人类文明》、创新创业课程《虚拟仿真创新应用与实践》，研究生课程《空间数据库》、《开源空间信息软件》，深受学生欢迎。陈斌老师荣获北京大学首届教学卓越奖，北京市教学名师奖，另获得多项市校级教学奖。
                        </div>
                    </div>
                    <div style="margin-top: 30px;">
                        <img src="./images/北大陈斌老师.png" alt="">
                    </div>
                </div>

                <div class="teachers" style="margin-top: 10px;">
                    <div>
                        <img src="./images/侯捷老师.jpg" alt="">
                    </div>
                    <div style="margin-top: 30px;">
                        <div style="margin-top: 2%;font-size: 20px;margin-left: 40px;">
                            <b>侯捷老师</b>
                        </div>
                        <div style="font-size: 18px;margin-top: 30px;width: 90%;line-height: 30px;font-family: '华文楷体';margin-left: 40px;">
                            侯捷老师是两岸著名技术教育者，计算机图书作者、译者、书评人。著有《深入浅出MFC》、《多型与虚拟》、《STL源码剖析》、《无责任书评》三卷，译有众多脍炙人口的高阶技术书籍，包括Meyers所著的“Effective
                            C++”系列。他还兼任教职于元智大学、同济大学、南京大学。同时，侯捷老师还深入了解企业一线实践，善于挖掘C++技术难点与要点，曾在多家大型软件公司多次做过培训，其深度的技术剖析和丰富的案例教学，深受企业及C++开发者的广泛好评。
                        </div>
                    </div>
                </div>

                <div class="teachers" style="margin-top: 10px;">
                    <div>
                        <div style="margin-top: 7%;font-size: 20px;margin-left: 3.5%;">
                            <b>翁恺老师</b>
                        </div>
                        <div style="font-size: 18px;margin-top: 30px;width: 90%;line-height: 30px;font-family: '华文楷体';margin-left: 3.5%;">
                            翁恺老师有着博士学历，是高级讲师，硕士生导师。他在中国大学MOOC开设了C语言程序设计、Java语言程序设计等课程，累计选课人次300余万，单次选课最高28万人，其中两门课程被认定为国家精品在线开放课程。2018年入选中国高校计算机专业优秀教师奖励计划，曾获国家教学成果一等奖、二等奖各1项，浙江省教学成果一等奖2项，获2018年度浙江大学永平杰出教学贡献奖
                        </div>
                    </div>
                    <div style="margin-top: 30px;">
                        <img src="./images/翁恺老师.jpg" alt="">
                    </div>
                </div>

                <div class="teachers" style="margin-top: 10px;">
                    <div>
                        <img src="./images/陈鄞老师.png" alt="">
                    </div>
                    <div style="margin-top: 30px;">
                        <div style="margin-top: 5%;font-size: 20px;margin-left: 40px;">
                            <b>陈鄞老师</b>
                        </div>
                        <div style="font-size: 18px;margin-top: 30px;width: 90%;line-height: 30px;font-family: '华文楷体';margin-left: 40px;">
                            陈鄞老师是副教授，硕导，是哈尔滨工业大学国家示范性软件学院院长助理，首批高校计算机专业优秀教师奖励计划获奖教师。2008年至今主讲编译原理、信息检索、自然语言处理、中文信息处理等本科和研究生课程，获得哈工大教学优秀奖1次，主编教材3部。
                        </div>
                    </div>
                </div>
            </div>

            <!-- 页脚（含仓库） -->
        <div
        style="margin-top: 5%;text-align: center;background-color:rgb(200, 225, 225);margin-bottom: 0; height: 280px;display: flex;align-items: flex-end;justify-content: center;">
        <!-- 页脚框架 -->
        <div>
            <div>
                <!-- logo为单独一行 -->
                <div>
                    <img style="width: 100px;height: 100px;" src="../兰/images/logo.png" alt="">
                </div>
                <!-- csdn二维码和w3cschool二维码 为一行 -->
                <div>
                    <img style="width: 100px;height: 100px;" src="../兰/images/csdn二维码.png" alt="">
                    <img style="width: 100px;height: 100px; margin-left: 50px;" src="../兰/images/w3cschool二维码.png"
                        alt="">
                </div>
            </div>

            <!-- （一行白字）相关链接、版权声明等 -->
            <div>
                <style>
                    a {
                        color: black;
                    }
                </style>
                <a href="" target="_blank">相关链接</a>
                <a href="" target="_blank">隐私政策</a>
                <a href="" target="_blank">版权声明</a>
                <a href="" target="_blank">反馈箱</a>
                <a href="https://gitee.com/lhuilan/final-group-task/tree/main/" target="_blank">代码仓库</a>
                <a href="./小组.html" target="_blank">关于我们</a>
            </div>

            <!-- 灰白字体 -->
            <div>
                <div>
                    &copy; 2024-现在 蓝学网 &nbsp; 网站建设：
                    <a href="./小组.html" target="_blank">顺职软件一班第八组</a>
                </div>
                <div>
                    网站维护：<a href="./小组.html" target="_blank">顺职软件一班第八组</a>&nbsp;&nbsp;&nbsp;联系方式：lanxuewang@qq.com
                </div>
            </div>
        </div>
    </div>
        </div>
</body>

</html>